<template>
  <div class="container">
    <h1>Vue初学者示例</h1>
    <p class="subtitle">学习Vue基础概念的最佳起点</p>
    
    <!-- 计数器部分 -->
    <div class="section">
      <h2>计数器示例</h2>
      <p>这个计数器展示了Vue的响应式数据：</p>
      <div class="counter">
        <button @click="decrement">-</button>
        <span class="count-display">{{ count }}</span>
        <button @click="increment">+</button>
      </div>
      <button @click="resetCount" class="reset-btn">重置计数器</button>
    </div>

    <!-- @click：Vue的事件绑定语法，点击时调用对应方法
         {{ count }}：文本插值，显示count变量的值 -->
    
    <!-- 待办事项部分 -->
    <div class="section">
      <h2>待办事项列表</h2>
      <p>已完成: {{ completedCount }} / {{ todos.length }}</p>
      
      
      <div class="todo-input">
        <input 
          v-model="newTodo" 
          @keyup.enter="addTodo"
          placeholder="输入新的待办事项..."
        >
        <button @click="addTodo">添加</button>
      </div>

      <!-- v-model：双向数据绑定，将输入框的值与newTodo变量同步
           @keyup.enter：键盘事件，按回车键时触发 -->
      
      <ul class="todo-list">
        <li 
          v-for="todo in todos" 
          :key="todo.id" 
          class="todo-item"
          :class="{ completed: todo.completed }"
        >
          <input 
            type="checkbox" 
            :checked="todo.completed"
            @change="toggleTodo(todo.id)"
          >
          <span>{{ todo.text }}</span>
          <button @click="removeTodo(todo.id)" class="delete-btn">删除</button>
        </li>
      </ul>
      <!-- 
v-for="todo in todos"：循环渲染todos数组中的每个项目
:key="todo.id"：为每个列表项提供唯一标识
:class="{ completed: todo.completed }"：条件类绑定，根据completed状态添加CSS类
:checked="todo.completed"：属性绑定，设置复选框的选中状态 
-->
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
// 从Vue导入组合式API函数
// ref：创建响应式数据
// computed：创建计算属性

// 定义Vue组件
// setup()：组合式API的入口函数

export default {
  name: 'App',
  setup() {

    // 计数器功能
    const count = ref(0)
    const increment = () => count.value++
    const decrement = () => count.value--
    const resetCount = () => count.value = 0
    //count.value：通过.value访问ref包装的响应式值
    // 待办事项功能
    const newTodo = ref('')
    const todos = ref([
      { id: 1, text: '学习Vue基础知识', completed: true },
      { id: 2, text: '创建一个Vue应用', completed: false },
      { id: 3, text: '理解响应式数据', completed: false }
    ])
    
    const addTodo = () => {
      if (newTodo.value.trim() !== '') {
        todos.value.push({
          id: Date.now(),
          text: newTodo.value,
          completed: false
        })
        newTodo.value = ''
      }
    }
//添加新待办事项
//使用Date.now()生成唯一ID
//添加后清空输入框


    
    const removeTodo = (id) => {
      todos.value = todos.value.filter(todo => todo.id !== id)
    }
    
    const toggleTodo = (id) => {
      const todo = todos.value.find(todo => todo.id === id)
      if (todo) {
        todo.completed = !todo.completed
      }
    }
    //removeTodo：通过过滤数组来删除项目
    //toggleTodo：切换待办事项的完成状态
    const completedCount = computed(() => {
      return todos.value.filter(todo => todo.completed).length
    })
    //计算属性：自动计算已完成的待办事项数量
// 当依赖的todos数据变化时自动重新计算
    return {
      count,
      newTodo,
      todos,
      increment,
      decrement,
      resetCount,
      addTodo,
      removeTodo,
      toggleTodo,
      completedCount
    }
    // 返回所有需要在模板中访问的响应式数据和方法
  } 
}


</script>

